<template>
  <div id="app">
    <!-- 这一种方式是根据路由来决定的 -->
    <!-- <keep-alive >
      <router-view v-if="$route.meta.keepAlive"/>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view> -->
    <!-- 下面这种方式是根据组件的名子来决定的 -->
    <keep-alive :include="keepAliveList" :exclude="notKeepAliveList">
      <router-view />
    </keep-alive>

    <loading v-if="isShowLoading"></loading>
    <preview-image v-if="isShowPreviewImage"></preview-image>
    <action-sheet v-if="isShowActionSheet"></action-sheet>
  </div>
</template>
<script>
import {mapGetters} from "vuex";
import routerConfig from "./router/routerConfig.js"
import {formatCityList} from "./utils/dataFormat";
export default {
  name:"App",
  data(){
    return {
      
    }
  },
  async created(){
    //如果有就不请求
    console.log(await this.cityList);
    
  },
  computed:{
    ...mapGetters(["isShowLoading","isShowPreviewImage","isShowActionSheet","cityList"]),
    keepAliveList:function(){
      return routerConfig.keepAliveList.toString();
    },
    notKeepAliveList(){
      return routerConfig.notKeepAliveList.toString();
    }
  }
}
</script>
<style lang="scss">
*{
  -webkit-tap-highlight-color: transparent;
}
body{
  margin: 0;
  padding: 0;
  font-size: 16px;
}
#app{
  width: 100vw;
  height: 100vh;
}
</style>
